import React,{Component} from 'react'
import { Row, Col, Icon, Menu, Dropdown } from 'antd'
import {connect} from 'react-redux';
import {Link} from 'react-router';
import './index.less'
import {doLogout} from '../../reducers/app/actions';
import {delLogAs} from '../../reducers/auth/actions';

import classNames from 'classnames';
class UserBox extends Component {
    constructor() {
        super();
        this.state = {
            showUserPannel:false
        }
    }
    render() {
        let {account} = this.props.app.userInfo ? this.props.app.userInfo : "";
        account = "Joseph";
        let {showUserPannel} = this.state;
        let className = classNames("link",{
            cur:showUserPannel
        });
        let {userInfo,appConfig} = this.props.app;
        let {permission} = userInfo.role;
        return (
            <li className={className}
                onMouseOver={()=>{
                //console.log("onMouseOver")
                this.setState({showUserPannel:true})
                }}
                onMouseOut={()=>{
                //console.log("onMouseOut")
                this.setState({showUserPannel:false
                })
                }}
                onClick={()=>{
                this.setState({showUserPannel:!showUserPannel})
                }}
                style={{position:"relative"}}>
                <a href="javascript:;">
                    <span className="user-name">
                        {userInfo.name}
                    </span>
                    <i className="top-menu-arrows"/>
                </a>
                <div className="drop-down-layer admin-center" style={{right:0}}>
                    <div className="admin-center-list">
                        <ul className="select-list clearfix">
                            <li>
                                <Link to="/account/info">帐户信息</Link>
                            </li>
                            {
                                userInfo.creator || permission["系统"] ?
                                    <li>
                                        <Link to="/users/list">系统</Link>
                                    </li>:null
                            }
                            {
                                userInfo.logas ?
                                    <li>
                                        <a href="javascript:;" onClick={this.delLogAs.bind(this)}>返回原帐号</a>
                                    </li>:null
                            }
                        </ul>
                    </div>
                    <div className="exit">
                        <a href="javascript:;" onClick={()=>{this.props.doLogout()}} className="btn-exit">退出</a>
                    </div>
                </div>
            </li>
        )
    }
    delLogAs(){
        this.props.delLogAs()
    }
}

export default connect(
    state => {
        const app = state.app;
        const common = state.app;
        return {
            app,
            common
        }
    },
    dispatch => {
        return {
            doLogout: () =>dispatch(doLogout()),
            delLogAs:()=>dispatch(delLogAs())
        }
    }
)(UserBox);
